<template>
  <view class="p-price" :style="{'color':color}">
    <text class="price1">{{initPrice1}}</text>
    <text class="price2">{{initPrice2}}</text>
  </view>
</template>

<script>
export default {
  name: 'PPrice',
  components: {},
  props: {
    price: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#EB441F'
    }
  },
  data() {
    return {
      price1: '',
      price2: ''
    };
  },
  computed: {
    // initPrice() {
    //   let nowPrice = this.price;
    //   if (nowPrice.indexOf('.') > -1) {
    //     nowPrice = parseFloat(nowPrice).toFixed(2);
    //     this.price1 = nowPrice.substring(0, nowPrice.length - 3);
    //     this.price2 = nowPrice.slice(nowPrice.length - 3);
    //   }
    // }
    initPrice1() {
      let nowPrice = this.price;
      if (nowPrice.indexOf('.') > -1) {
        nowPrice = parseFloat(nowPrice).toFixed(2);
        return nowPrice.substring(0, nowPrice.length - 3);
      } else {
        return nowPrice;
      }
    },
    initPrice2() {
      let nowPrice = this.price;
      if (nowPrice.indexOf('.') > -1) {
        nowPrice = parseFloat(nowPrice).toFixed(2);
        return nowPrice.slice(nowPrice.length - 3);
      } else {
        return '.00';
      }
    }

  },
  watch: {},
  created() {
  },
  mounted() {

  },
  methods: {
    // initPrice() {
    //   let nowPrice = this.price;
    //   if (nowPrice.indexOf('.') > -1) {
    //     nowPrice = parseFloat(nowPrice).toFixed(2);
    //     this.price1 = nowPrice.substring(0, nowPrice.length - 3);
    //     this.price2 = nowPrice.slice(nowPrice.length - 3);
    //   }
    // }
  }
};
</script>

<style lang="scss">
.p-price{
  display: inline-block;
  color: #EB441F;
  font-weight: 900;
  line-height: 48px;
  .price1{
    font-size: 48px;
  }
  .price2{
    font-size: 36px;
  }
}
</style>
